<template>
  <a-card class="storeManage__wrap">
    <template #title>
      <a-row :gutter="16" type="flex" justify="space-between">
        <a-col flex="1">
          <a-row :gutter="[6, 8]">
            <a-col v-bind="colAttr">
              <a-input-search
                @search="onSearch"
                allow-clear
                placeholder="店铺ID"
                v-model:value="searchData.shopId"
              />
            </a-col>
            <a-col v-bind="colAttr">
              <a-input-search
                @search="onSearch"
                allow-clear
                placeholder="店铺名称"
                v-model:value="searchData.shopName"
              />
            </a-col>
            <a-col v-bind="colAttr">
              <a-select
                style="width: 100%"
                v-model:value="searchData.status"
                placeholder="店铺状态"
                @change="onSearch"
                allowClear
              >
                <a-select-option value="0">营业中</a-select-option>
                <a-select-option value="1">已打烊</a-select-option>
              </a-select>
            </a-col>
            <a-col v-bind="colAttr">
              <a-select
                style="width: 100%"
                v-model:value="searchData.shopType"
                placeholder="当前版本"
                @change="onSearch"
                allowClear
              >
                <a-select-option value="standard">标准版</a-select-option>
                <a-select-option value="trial">试用版</a-select-option>
              </a-select>
            </a-col>
            <a-col v-bind="colAttr">
              <a-input-search
                @search="onSearch"
                allow-clear
                placeholder="所属管理员"
                v-model:value="searchData.phonenumber"
              />
            </a-col>
          </a-row>
        </a-col>
        <a-col flex="120px">
          <a-button type="primary" @click="exportData">导出</a-button>
        </a-col>
      </a-row>
    </template>
    <a-table
      :columns="table.columns"
      :data-source="table.data"
      @change="onTableChange"
      :pagination="false"
      rowKey="shopId"
    >
      <template #action="{ index }">
        <!-- {{ index }} -->
        <a-button size="small" type="link" @click="previewStore(index)">店铺预览</a-button>
        <a-button size="small" type="link" @click="detailStore(index)">查看详情</a-button>
      </template>
      <template #payAmount="{ text }">￥{{ text }}</template>
    </a-table>
    <a-row style="margin-top: 20px" type="flex" justify="end">
      <a-pagination
        showSizeChanger
        v-model:pageSize="pagination.limit"
        v-model:current="pagination.page"
        :total="pagination.total"
        :showTotal="() => `共 ${pagination.total} 条数据`"
        @change="getData"
        @showSizeChange="getData"
      />
    </a-row>
  </a-card>
  <share-modal
    v-model:visible="shareModalData.visible"
    :text="shareModalData.text"
    :storeUrl="shareModalData.storeUrl"
  />
  <detail-drawer v-model:visible="drawer.visible" :data="drawer.data" />
</template>
<script>
import { toRefs, defineComponent, reactive } from 'vue';
import { apiGetStoreList, apiExportStoreList } from '@/api/storeManage';
import shareModal from '@/components/share-modal';
import detail from './components/detail';
import { parseTime, downloadFile } from '@/utils';
export default defineComponent({
  name: 'storeManage',
  components: {
    shareModal,
    detailDrawer: detail,
  },
  setup() {
    const state = reactive({
      colAttr: {
        xs: 12,
        sm: 8,
        md: 6,
        lg: 4,
        xl: 3,
      }, // 搜索区域栅格化
      statusMap: {
        1: '已打烊',
        0: '营业中',
      }, // 店铺状态Map
      shopTypeMap: {
        trial: '试用版',
        standard: '标准版',
      },
      searchData: {
        shopId: '',
        shopName: '',
        status: undefined,
        shopType: undefined,
        phonenumber: '',
        sortField: '',
        sort: '',
      }, // 搜索数据
      pagination: {
        page: 1,
        limit: 10,
        total: 0,
      },
      table: {
        columns: [
          {
            title: '店铺ID',
            dataIndex: 'shopId',
          },
          {
            title: '店铺名称',
            dataIndex: 'shopName',
          },
          {
            title: '店铺状态',
            dataIndex: 'status',
            sorter: true,
          },
          {
            title: '当前版本',
            dataIndex: 'shopType',
            sorter: true,
          },
          {
            title: '最后活跃时间',
            dataIndex: 'visitTimes',
            sorter: true,
          },
          {
            title: '开店时间',
            dataIndex: 'createTimes',
            sorter: true,
          },
          {
            title: '到期时间',
            dataIndex: 'expirationTimes',
            sorter: true,
          },
          {
            title: '付费金额',
            dataIndex: 'payAmount',
            sorter: true,
            slots: { customRender: 'payAmount' },
          },
          {
            title: '所属管理员',
            dataIndex: 'phonenumber',
            sorter: true,
          },
          {
            title: '操作',
            slots: { customRender: 'action' },
          },
        ],
        data: [],
      },

      shareModalData: {
        visible: false,
        text: '',
        storeUrl: '',
      },
      drawer: {
        visible: false,
        data: {},
      },
    });

    const getData = async () => {
      const params = {
        ...state.searchData, // 搜索数据
        ...state.pagination, // 分页数据
      };
      const { code, data } = await apiGetStoreList(params);
      if (code === 200) {
        state.table.data = data.list;
        state.pagination.total = data.total;
      }
    };
    getData();

    const orderMap = {
      ascend: '0',
      descend: '1',
    };
    const fieldMap = {
      createTimes: 'createTime',
      expirationTimes: 'expirationTime',
      visitTimes: 'visitTime',
      status: 'expirationTime',
    };
    const onTableChange = (pagination, filters, sorter) => {
      const { field, order } = sorter;
      state.searchData.sortField = order ? fieldMap[field] || field || '' : '';
      state.searchData.sort = orderMap[order] || '';
      onSearch();
    };

    // 进行搜索
    const onSearch = () => {
      state.pagination.page = 1;
      getData();
    };
    // 预览
    const previewStore = index => {
      const appid = state.table.data[index].appId;
      state.shareModalData.text = appid ? `http://${appid}.e-xiaot.com` : '';
      state.shareModalData.visible = true;
    };

    // 详情
    const detailStore = index => {
      const data = state.table.data[index];
      state.drawer.data = data;
      state.drawer.visible = true;
    };

    // 导出
    const exportData = async () => {
      const params = {
        ...state.searchData, // 搜索数据
      };
      apiExportStoreList(params).then(res => {
        downloadFile(res, {
          fileName: `店铺管理${parseTime(new Date(), '{y}年{m}月{d}日{h}：{m}：{s}')}`,
        });
      });
    };
    return {
      ...toRefs(state),
      onTableChange,
      previewStore,
      detailStore,
      onSearch,
      getData,
      exportData,
    };
  },
});
</script>
<style lang="less">
.storeManage__wrap .ant-select-selection-placeholder {
  font-weight: normal;
}
</style>
